<template>
  <div class="header-box clearfix">
    <div class="handle">
      <!--<a href="javascript:;" class="search"></a>
      <a href="javascript:;" class="full"></a>-->
    </div>
    <div class="user">
      <!-- <p class="text">当前机构</p>
      <p class="text">
        <a href="">控制台</a>
      </p> -->
      <div class="user-box">

        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <img src="@/assets/img/avatar_user.png" slot="reference" alt="" />
          </span>
          <el-dropdown-menu slot="dropdown" class="dropdown">
            <el-dropdown-item>
              <span @click="logout">登出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { removeCookie } from '@/utils/tool'

export default {
  data() {
    return {

    };
  },
  components: {},
  name: "vHeader",
  props: [],
  methods: {
    async logout() {
      removeCookie('console_login_ticket')
      removeCookie('console_refresh_token')
      this.$router.push({
        path: '/login'
      })
    }
  },
  async mounted() {

  },
  destroyed() {

  }
};
</script>

<style lang="less" scoped>
.header-box {
  padding: 6px 0 0 54px;
  width: 100%;
  box-sizing: border-box;

  .handle {
    float: left;
    padding-top: 10px;

    .search {
      float: left;
      width: 22px;
      height: 22px;
      margin-right: 16px;
      background: url(~@/assets/img/search.png) no-repeat;
      background-size: 22px 22px;
    }

    .full {
      float: left;
      width: 22px;
      height: 22px;
      margin-right: 16px;
      background: url(~@/assets/img/full.png) no-repeat;
      background-size: 22px 22px;
    }
  }

  .user {
    float: right;

    .text {
      float: left;
      margin-right: 16px;
      padding-top: 10px;
    }

    .user-box {
      float: left;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}

.dropdown {
  padding: 2px;
}

.user-box-item {
  text-align: center;

  a {
    color: #409EFF;
  }
}
</style>
